<template>
    <div class='order'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
                <el-col :span="24" style="margin-bottom: 20px;">
                    <el-form-item>
                        <el-button size="mini" v-for="item, index in btnList" :key="index" @click="changeTab(item, index)"
                            :type="curLine == index ? 'primary' : 'default'">
                            {{ item.dictLabel }}</el-button>
                    </el-form-item>
                </el-col>
                <el-form-item label="订单编号：" prop="key_order_no" style="margin-right:25px;">
                    <el-input v-model="queryParams.key_order_no" placeholder="订单编号" clearable size="small" />
                </el-form-item>
                <el-form-item label="支付类型" prop="key_pay_type" style="margin-right:25px;">
                    <el-select v-model="queryParams.key_pay_type" placeholder="请选择" clearable size="small">
                        <el-option v-for="dict in payType" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="电影片名：" prop="key_film_name" style="margin-right:25px;">
                    <el-input v-model="queryParams.key_film_name" placeholder="电影片名" clearable size="small" />
                </el-form-item>
                <el-form-item label="座位名称：" prop="key_seat_name" style="margin-right:25px;">
                    <el-input v-model="queryParams.key_seat_name" placeholder="座位名称" clearable size="small" />
                </el-form-item>
                <!-- <el-form-item label="提交时间：" prop="key_range" style="margin-right:25px;">
                    <el-date-picker v-model="queryParams.key_range" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" placeholder="请选择提交时间范围" />
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
                        v-hasPermi="['customer:manage:export']">导出
                    </el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="22">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="title='新增';handleShow='add'" v-hasPermi="['user:depart:add']">
                        新增</el-button>
                </el-col> -->
                <!-- <el-col :span="22">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleBulk"
                        v-hasPermi="['customer:manage:add']">
                        批量修改</el-button>
                </el-col> -->
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight
                :height="tableList.length > 0 ? '900px' : '120px'" @selection-change="handleSelectionChange"
                @row-click="toggleSelection">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="序号" align="center" prop="index" width='80px' />
                <el-table-column label="订单信息" width='300px'>
                    <template slot-scope="scope">
                        <div>订单号：<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.order_no ?
                            scope.row.order_no : '' }}</span></div>
                        <div>支付订单号：<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.out_trade_no ?
                            scope.row.out_trade_no : '' }}</span></div>
                        <div>商户订单号:<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.trade_no ?
                            scope.row.trade_no :
                            '' }}</span></div>
                        <div>市场价总金额:<span style="color:#30B08F;font-weight: 600;">{{ scope.row.net_total_price ?
                            scope.row.net_total_price :
                            '' }}</span></div>
                        <div>实际价总金额:<span style="color:#30B08F;font-weight: 600;">{{ scope.row.real_total_price ?
                            scope.row.real_total_price :
                            '' }}</span></div>
                        <div>最终支付金额:<span style="color:#30B08F;font-weight: 600;">{{ scope.row.pay_total_price ?
                            scope.row.pay_total_price :
                            '' }}</span></div>
                        <div>支付类型:<span style="color:#30B08F;font-weight: 600;">{{ selectDictLabel(payType,
                            scope.row.pay_type)
                        }}</span></div>
                        <div>票务系统扣款金额:<span style="color:#30B08F;font-weight: 600;">{{ scope.row.deduct_price ?
                            scope.row.deduct_price :
                            '' }}</span></div>
                             <div>票务系统分润金额:<span style="color:#30B08F;font-weight: 600;">{{ scope.row.profit_price ?
                            scope.row.profit_price :
                            '' }}</span></div>
                        <div>票务系统订单号:<span style="color:rgb(70, 68, 68);font-weight: 600;">{{ scope.row.movie_order_sn ?
                            scope.row.movie_order_sn : '' }}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="购买信息" width='210px'>
                    <template slot-scope="scope">
                        <div>购买会员：<span style="color: #30B08F;font-weight: 600;">{{  scope.row.user.id}}</span></div>
                        <div style="display: flex;align-items: center;;">会员头像:<el-image
                                style="width: 40px; height: 40px;border:1px solid #eee;border-radius: 5px;"
                                :src="scope.row.user.avatar" :preview-src-list="[scope.row.user.avatar]">
                            </el-image>
                        </div>
                        <div>用户名：{{ scope.row.user.name}}</div>
                        <div>会员昵称：{{ scope.row.user.nicename }}</div>
                        <div>购买手机号：{{ scope.row.movie_mobile }}</div>
                        <div>购买座位名称：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.purch_seat_names }}</span></div>
                        <div>是否自动调座：{{ selectDictLabel(shifou, scope.row.movie_is_seat_adjus) }}</div>
                        <div>真实座位名称：{{ scope.row.real_seat_names }}</div>
                        <div>购买数量：<span style="color: #30B08F;font-weight: 600;">{{  scope.row.total_number}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width='250px'>
                    <template slot-scope="scope">
                        <div>订单状态：<span style="color: #30B08F;font-weight: 600;">{{ selectDictLabel(btnList, scope.row.orders_state)}}</span></div>
                        <div  v-if="scope.row.orders_state == -1">取消时间：{{ scope.row.cancel_time}}</div>
                        <div v-if="scope.row.orders_state == -1">取消原因：{{ scope.row.cancel_reason}}</div>
                        <div v-if="scope.row.orders_state == -1">取消类型：{{ selectDictLabel(cancelType, scope.row.cancel_state)}}</div>
                        <div v-if="scope.row.orders_state == 2 || scope.row.orders_state == 3">出票时间：{{ scope.row.issue_time}}</div>
                        <div v-if="scope.row.orders_state == 2 || scope.row.orders_state == 3">票据内容：<span v-for="(item, index) in scope.row.ticket_sns" :key="index">{{ item }}</span></div>
                        <div  v-if="scope.row.orders_state == -2">关闭时间：{{ scope.row.close_time}}</div>
                        <div  v-if="scope.row.orders_state == 3">完成时间：{{ scope.row.complete_time}}</div>
                        <div>创建时间：{{ scope.row.create_time}}</div>
                        <div>支付状态：<span style="color: #30B08F;font-weight: 600;">{{ selectDictLabel(payStatus, scope.row.pay_state)}}</span></div>
                        <div v-if="scope.row.pay_state !== 0">开始支付时间：{{ scope.row.pay_start_time}}</div>
                        <div v-if="scope.row.pay_state == 2">支付成功时间：{{ scope.row.pay_success_time }}</div>
                        <div v-if="scope.row.pay_state == -2">支付失败时间：{{ scope.row.pay_fail_time }}</div>
                        <div v-if="scope.row.pay_type == 98 || scope.row.pay_type == 99">确认支付说明:{{scope.row.confirm_pay_remark}}</div>
                        <div v-if="scope.row.pay_type == 98 || scope.row.pay_type == 99">支付凭证:
                            <el-image v-for="url in scope.row.confirm_pay_image" :key="url" style="width: 50px; height: 50px;border:1px solid #eee;margin-right: 10px;"
                                :src="url" :preview-src-list="[url]">
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="电影信息" mini-width='250px'>
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;;">电影海报:<el-image
                                style="width: 40px; height: 40px;border:1px solid #eee;border-radius: 5px;"
                                :src="scope.row.movie_film_pic" :preview-src-list="[scope.row.movie_film_pic]">
                            </el-image>
                        </div>
                        <div>电影名称：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_film_name }}</span>
                        </div>
                        <div>导演：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_film_director }}</span>
                        </div>
                        <div>主演：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_film_cast }}</span></div>
                        <div>电影时长: <span style="color: #30B08F;font-weight: 600;">{{
                            scope.row.movie_film_duration }}分钟</span></div>
                        <div>上映日期: <span style="color: #30B08F;font-weight: 600;">{{
                            scope.row.movie_film_publish_date }}</span></div>
                        <div>影片类型: <span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_film_types }}</span>
                        </div>
                        <div>上映类型: <span style="color: #30B08F;font-weight: 600;">{{ scope.row.mmovie_film_version_types }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="影院信息" mini-width='280px'>
                    <template slot-scope="scope">
                        <div>影院名称：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_cinema_name }}</span>
                        </div>
                        <div>影院地址：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_cinema_address }}</span>
                        </div>
                        <div>影厅名称：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_hall_name }}</span>
                        </div>
                        <div>影厅类型：<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_plan_type }}</span>
                        </div>
                        <div>城市:<span style="color: #30B08F;font-weight: 600;">{{ scope.row.movie_city_name ?
                            scope.row.movie_city_name : '' }}</span></div>
                        <div>影院电话:{{ scope.row.movie_cinema_phone ? scope.row.movie_cinema_phone : '' }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-document"
                            @click="title = '订单详情'; form = JSON.parse(JSON.stringify(scope.row)); handleShow = 'detail'"
                            v-hasPermi="['user:depart:edit']">
                            查看订单
                        </el-button>
                        <el-button v-if="scope.row.orders_state == 0" icon="el-icon-circle-close" size="mini" type="text"
                            @click="handleDelete(scope.row)" v-hasPermi="['user:depart:start']">取消订单
                        </el-button>
                        <el-button v-if="scope.row.orders_state == 0"
                            @click="orderNo = String(scope.row.out_trade_no); handleShow = 'confirm'" size="mini" type="text"
                            v-hasPermi="['user:depart:stop']">手动确认收款
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                            v-hasPermi="['user:depart:del']">
                            删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page"
                :limit.sync="queryParams.limit" @pagination="getList" />
        </div>
        <confirmPay v-if="handleShow == 'confirm'" :handleShow="handleShow" :orderNo="orderNo" @close="handleShow = ''"
            @load="getList" />
        <!-- <deliveySet v-if="handleShow == 'delivery'" :handleShow="handleShow" :orderNo="orderNo" @close="handleShow = ''"
            @load="getList" />
        <deliveyTrack v-if="handleShow == 'tracking'" :handleShow="handleShow" :orderNo="orderNo" @close="handleShow = ''"
            @load="getList" /> -->

    </div>
</template>
<script>
import { getMovieOrdersLists, getMovieOrdersInfo, confirmMoviePay } from "@/api/movieOrder/movieOrder.js"
import confirmPay from "./handle/movieCfmPay"
// import deliveySet from "./handle/deliverySet"
// import deliveyTrack from "./handle/deliveryTrack"
// import { departStatus, payType, payState } from "@/api/dictionary"

import throttle from 'lodash.throttle'
export default {
    name: 'order',
    components: {
        confirmPay,
        // deliveySet,
        // deliveyTrack
    },
    props: {

    },
    data() {
        return {
            showSearch: true,
            loading: false,
            pageCount: 0,
            total: 0,
            queryParams: {
                page: 1,
                limit: 20,
                key_order_no: '',
                key_film_name: '',
                key_pay_type: '',
                key_seat_name: '',
                key_orders_state: '',
            },
            tableList: [],
            payStatus: [],
            shifou:[],
            payType: [],
            cancelType:[],
            // payState: payState,
            handleShow: "",
            orderNo: null,
            formLoading: false,
            form: {
                id: null,
                name: null,
            },
            rules: {
                name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
            },
            title: "",
            size: 'mini',
            curLine: 0,
            btnList: [
                {
                    dictLabel: '全部订单',
                    dictValue: ''
                },
                {
                    dictLabel: '待付款',
                    dictValue: 0
                },
                {
                    dictLabel: '待出票',
                    dictValue: 1
                },
                {
                    dictLabel: '已出票',
                    dictValue: 2
                },
                {
                    dictLabel: '已完成',
                    dictValue: 3
                },
                {
                    dictLabel: '已取消',
                    dictValue: -1
                },
                {
                    dictLabel: '已关闭',
                    dictValue: -2
                }
            ],
            payType: [
                {
                    dictLabel: '微信',
                    dictValue: 1
                },
                {
                    dictLabel: '支付宝',
                    dictValue: 2
                },
                {
                    dictLabel: '加盟商手动确认支付成功',
                    dictValue: 98
                },
                {
                    dictLabel: '总后台手动确认支付成功',
                    dictValue: 99
                },
            ],
            payStatus: [
                {
                    dictLabel: '支付失败',
                    dictValue: -2
                },
                {
                    dictLabel: '未支付',
                    dictValue: 0
                },
                {
                    dictLabel: '支付中',
                    dictValue: 1
                },
                {
                    dictLabel: '支付成功',
                    dictValue: 2
                },
            ],
            
            cancelType: [
                {
                    dictLabel: '超时自动取消',
                    dictValue: 0
                },
                {
                    dictLabel: '用户取消',
                    dictValue: 1
                },
                {
                    dictLabel: '加盟商后台取消',
                    dictValue: 2
                },
                {
                    dictLabel: '蔚蓝后台取消',
                    dictValue: 3
                },
            ],
            shifou: [
                {
                    dictLabel: '不可调座',
                    dictValue: 1
                },
                {
                    dictLabel: '可调座位',
                    dictValue: 2
                },
            ]
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true;
            getMovieOrdersLists(this.queryParams).then(res => {
                this.tableList = res.data.lists;
                this.pageCount = res.data.pageCount;
                this.loading = false;
            });
        },
        changeTab(item, index) {
            this.curLine = index
            this.queryParams.key_orders_state = item.dictValue
            this.getList()
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        toggleSelection(row) {
            this.$refs.tableList.toggleRowSelection(row);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectData = selection;
        },
        handleBulk(ids) {
            this.$confirm('是否确认批量修改?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delSector({ id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess("修改成功");
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                // return exportBanner(queryParams);
            }).then((response) => {
                // this.download(response.msg);
            });
        },
        close() {
            this.form = {}
            this.handleShow = ""
            this.getList()
        },
        // handleAble(row) {
        //     // let label = row.status == 0 ? '停用' : '启用';
        //     this.$confirm(`是否将“${row.name}”关闭?`, "警告", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         type: "warning"
        //     }).then(function () {
        //         return setSectorStatus({ id: row.id });
        //     }).then(() => {
        //         this.getList();
        //         this.msgSuccess(`${label}成功`);
        //     })
        // },
        handleDelete(row) {
            this.$confirm('是否确认取消' + '"' + row.name + '"' + '?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return cancelGoodsOrder({ order_no: row.order_no });
            }).then(() => {
                this.getList();
                this.msgSuccess("取消成功");
            })
        },

        confirmPay(row) {
            this.handleShow = 'confirm';
            // getHousingInfo({ code: row.code }).then(res => {
            //     this.title = "商品入库"
            //     this.stockRow = res.data;
            //     this.handleShow = 'audit';
            // })
        },

        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    setSector(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.getList();
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    }
}
</script>

<style lang='scss' scoped>
.decs {

    /deep/.el-descriptions--mini.is-bordered .el-descriptions-item__cell {
        padding: 0 10px;
    }

    /deep/.el-descriptions-item__cell {
        padding-left: 8px;
        font-size: 14px;
    }

    /deep/ .el-col {
        margin: 0px;
        padding: 0px;
        height: 30px;
        line-height: 30px;
    }

    /deep/.el-form-item__error {
        top: 21%;
        right: 5% !important;
        left: unset;
    }
}

.p {
    font-size: 14px;
}
</style>
